<template>
    <div class="taskDetail">
        <div class="boxTitle">
            <img src="@/assets/images/home/rightIcon.png" alt="">
            <span class="title">设备类型统计</span>
        </div>
        <div class="content">
            <div class="quest">
                <!-- <div class="quest_content">
                    <img class="realTime_icon" src="@/assets/images/dailyMaintenance/realTime_icon.png" alt="">
                    <span>巡检任务总数：</span><span class="quest_num">280</span>
                </div> -->
                <div class="nav_time">
                    <span class="time_item" :class="{ 'time_active': navIndex == 0 }"
                        @click="changeIndex(0)">近30日</span>
                    <span class="time_item" :class="{ 'time_active': navIndex == 1 }"
                        @click="changeIndex(1)">近3个月</span>
                    <span class="time_item" :class="{ 'time_active': navIndex == 2 }" @click="changeIndex(2)">近1年</span>
                </div>
            </div>
            <div class="statistics">
                <!-- <div class="statistics_title">
                    <img class="historyData_icon" src="@/assets/images/dailyMaintenance/historyData_icon.png" alt="">
                    <span>各班组任务完成情况</span>
                </div> -->
                <div class="inspected">责任班组</div>
                <lineChart_teamGroup :data="chartData.data2"></lineChart_teamGroup>
            </div>
            <div class="statistics">
                <!-- <div class="statistics_title">
                    <img class="historyData_icon" src="@/assets/images/dailyMaintenance/historyData_icon.png" alt="">
                    <span>各班组任务完成情况</span>
                </div> -->
                <div class="inspected">外委单位</div>
                <lineChart_teamGroup :data="chartData.data2"></lineChart_teamGroup>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import lineChart_teamGroup from './lineChart_teamGroup.vue';
let navIndex = ref(0);

//改变时间范围筛选
const changeIndex = (index: number) => {
    if (navIndex.value != index) {
        navIndex.value = index;
    }
}

const chartData = reactive({
    data: [
        { date: '10/01', value: 50 },
        { date: '10/02', value: 60 },
        { date: '10/03', value: 70 },
        { date: '10/04', value: 30 },
        { date: '10/05', value: 40 },
        { date: '10/06', value: 80 },
        { date: '10/07', value: 60 },
    ] as any,
    data2: [
        { value: '10', name: '班组A' },
        { value: "25", name: '班组B' },
        { value: "33", name: '班组C' },
        { value: "28", name: '班组D' },
    ]
})
</script>

<style lang="scss" scoped>
.taskDetail {
    transition: transform 0.5s ease;
    position: absolute;
    z-index: 999;
    padding-left: vh(28);
    padding-right: vh(28);
    background: url(@/assets/images/dailyMaintenance/bx02.png) no-repeat;
    background-size: 100% 100%;
    left: vw(20);
    top: vh(284);
    width: vw(422);
    height: vh(450);

    .boxTitle {
        img {
            width: vh(16);
            height: vh(14);
        }
    }

    .content {
        margin-top: vh(12);

        .quest {
            display: flex;
            line-height: 1;
            padding-bottom: vh(12);
            align-items: center;
            justify-content: flex-end;

            .nav_time {
                display: flex;

                .time_item {
                    width: vh(52);
                    height: vh(19);
                    display: inline-block;
                    background: rgba(0, 227, 254, 0.2);
                    border-radius: vh(4);
                    margin-left: vh(10);
                    line-height: vh(19);
                    text-align: center;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    font-size: vh(12);
                    color: #94BCC4;
                    cursor: pointer;

                    &.time_active {
                        border: 1px solid #00E3FE;
                        color: #00D6FF;
                    }
                }
            }
        }

        .statistics {
            .percent_text {
                display: flex;
                justify-content: space-between;
            }

            .percent_content {
                width: 100%;
                display: flex;

                .percent_normal {
                    // flex: 80;
                    height: vh(6);
                    background: #00C0FF;
                    border-radius: vh(3) 0 0 vh(3);
                }

                .percent_abnormal {
                    // flex: 20;
                    height: vh(6);
                    background: #CFA972;
                    border-radius: 0 vh(3) vh(3) 0;
                }
            }
        }

        .inspected {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: vh(12);
            color: #00B1CD;
            letter-spacing: vh(2);
        }
    }
}
</style>